<template>
    <div class="footer m-flex --m-w100 --m-jc-center">
        <div class="footer-wrap m-flex m-f-column m-f-center">
            <div class="img">
                <img v-lazy="getImageUrl(component.img)">
            </div>
            <div class="motto --m-fs12">
                <span>{{ component.motto }}</span>
            </div>
            <div class="copyright --m-fs12 m-flex --m-ai-center">
                <span>{{ component.copyright }}</span>
                <svg-icon :name="component.china" color="red" :size="2"></svg-icon>
            </div>
            <div class="beian --m-fs12 --m-mb8">
                <a class="m-link m-flex --m-ai-center" :href="component.beianUrl" target="_blank">
                    <img v-lazy="getImageUrl(component.national)">
                    <span>{{ component.beian }}</span>
                </a>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { usefooterStore } from '@/store/components/footer';
import { getImageUrl } from '@/utils/core';
import { computed } from 'vue';

const footer = usefooterStore();

const component = computed(() => footer.component)

</script>

